<template>
	<div class="wrapper">
		<div class="top">
			<div class="top_header">
				<div class="iconfont top_header_back" @click="handleBack">&#xe603;</div>
				确认订单
			</div>
			<div class="top_receiver">
				<div class="top_receiver_title">收货地址</div>
				<div class="top_receiver_address">广东工贸职业技术学院（天河校区）</div>
				<div class="top_receiver_info">
					<span class="top_receiver_info_name">季节（先生）</span>
					<span class="top_receiver_info_name">13714722852</span>
				</div>
				<div class="iconfont top_receiver_icon">&#xe603;</div>
			</div>
		</div>
		<div class="product">
			<div class="product_title">
				{{ shopName }}
			</div>
			<div class="product_wrapper">
				<div class="product_list">
					<div class="product_item" v-for="item in orderData.orderList" :key="item._id">
						<img :src="item.imgUrl" class="product_item_img">
						<div class="product_item_detail">
							<h4 class="product_item_title">{{ item.name }}</h4>
							<p class="product_item_price">
								<span>
									<span class="product_item_yen">&yen;</span>
									{{ item.price }} x {{ item.count }}
								</span>
								<span class="product_item_total">
									<span class="product_item_yen">&yen;</span>
									{{ (item.price * item.count).toFixed(2) }}
								</span>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="order">
			<div class="order_price">实付金额：<b>￥{{orderData.price}}</b> </div>
			<div class="order_btn" @click="changeShowCart">提交订单</div>
		</div>
		<div class="mask" v-if="showCart" @click="changeShowCart">
			<div class="mask_content" @click.stop>
				<h3 class="mask_content_title">确认离开收银台?</h3>
				<p class="mask_content_desc">请尽快完成支付，否则将被取消</p>
				<div class="mask_content_btns">
					<div class="mask_content_btn mask_content_btn--first" @click="handleConfirmOrder(1)">取消订单</div>
					<div class="mask_content_btn mask_content_btn--last" @click="handleConfirmOrder(0)">确认支付</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import { useStore } from 'vuex'
	import { useRouter,useRoute } from 'vue-router'
	import { computed,ref } from 'vue'
	import { get } from '../../utils/request.js'
	export default{
		name: 'OrderCofirmation',
		setup() {
			const store = useStore();
			const router = useRouter();
			const route = useRoute();
			const shopId = parseInt(route.params.id)
			const cartList = store.state.cartList	
			const showCart = ref(false)
			const changeShowCart = () => {
				showCart.value = !showCart.value
			}
			const handleBack = () => {
				router.back()
			}
			// 拿到当前订单店铺的名称
			const shopName = cartList[shopId]?.shopName
			// 定义一个计算属性，用于获取订单里面所有相关数据
			const orderData = computed(()=>{
				// 首先拿到当前这个店铺的所有商品信息
				let productList = cartList[shopId]?.productList

				// 定义一个对象专门存放被选中同时数量大于0的商品信息
				const orderList = {}
				// 定义一个变量，用于存放总价
				let price = 0
				let total = 0
				for(let i in productList){
					const product = productList[i]
					if(product.check && product.count > 0)
					{
						orderList[i] = product
						total += 1
						// console.log("orderList["+i+"]",orderList[i] );
						price += (product.count * product.price)
					}
				}
				// console.log(orderList)
				return { orderList,price:price.toFixed(2),total }
			})

			// 获取当前用户的信息
			const userInfo = JSON.parse(localStorage.userInfo)
			const uid = userInfo.uid
			// 通过这个方法实现提交订单或者取消订单
			const handleConfirmOrder = async (isCanceled) => {
				// 存放商品具体id和数量
				const products = []
				for(let i in orderData.value.orderList){
					const product = orderData.value.orderList[i]
					products.push({id:parseInt(product._id,10),num:product.count,imgUrl:product.imgUrl})  
				
				}

				let price = orderData.value.price
				let total = orderData.value.total
				// console.log(isCanceled)
				try{
					// 向后台提交数据
					const res = await get('/api/order',{
						uid,
						addressId: 1,
						shopId,
						shopName,
			// 传递一个参数，让后端知道我这个订单是已经完成支付还是被取消了
			// 如果这个值为true，表示当前订单被取消，否则订单已经完成支付
						isCanceled,
						// 传递商品信息,要求传递进来的是商品的id和数量
						products,
						price,
						total
					})
					
					if(res?.errno === 0){
						// store.commit('clearOrderData',{shopId,isCanceled})
						store.commit('clearOrderData',{shopId,isCanceled,products})
						router.push({name:'OrderList'})
					}

					console.table(res)
					}catch(e){
						alert('连接失败'+e)
					}
			}
			return { cartList,handleBack,orderData,shopName,showCart,changeShowCart,handleConfirmOrder }
		}
	}
</script>



<style lang="scss" scoped>
	.wrapper {
	   position: absolute;
	   left: 0;
	   right: 0;
	   top: 0;
	   bottom: 0;
	   background-color: #eee;
	   padding: 0;
	}
	.top {
	  position: relative;
	  height: 1.96rem;
	  background-size: 100% 1.59rem;
	  background-image:linear-gradient(0deg,rgba(0,145,255,0) 4%,#0091ff 50%);
	  background-repeat: no-repeat;
	  background-color: #eee;
	  &_header {
	    position: relative;
	    padding-top: .26rem;
	    line-height: .24rem;
	    color: #fff;
	    text-align: center;
	    font-size: .16rem;
	    &_back {
	      position: absolute;
	      left: .18rem;
	      font-size: .22rem;
	    }
	  }
	  &_receiver {
	    position: absolute;
	    left: .18rem;
	    right: .18rem;
	    bottom: 0;
	    background-color: #fff;
	    height: 1.11rem;
	    border-radius: .04rem;
	    &_title {
	      line-height: .22rem;
	      padding: .16rem 0 .14rem .16rem;
	      font-size: .16rem;
	      color: #333;
	    }
	    &_address {
	      line-height: .2rem;
	      padding: 0 .4rem 0 .16rem;
	      font-size: .14rem;
	      color: #333;
	    }
	    &_info {
	      padding: .06rem 0 0 .16rem;
	      &_name {
	        margin-right: .06rem;
	        line-height: .18rem;
	        font-size: .12rem;
	        color: #666;
	      }
	    }
	    &_icon {
	      position: absolute;
	      right: .16rem;
	      top: .5rem;
	      transform: rotate(180deg);
	      color: #666;
	      font-size: .2rem;
	    }
	  }
	}
	.product{
		margin: .16rem .18rem .1rem .18rem;
		background: #FFF;
		&_title {
			padding: .16rem;
			font-size: .16rem;
			color: #333;
		}
		&_wrapper{
			overflow-y: scroll;
			margin: 0 .18rem;
			position: absolute;
			left: 0;
			right: 0;
			bottom: .6rem;
			top: 2.6rem;
		}
		&_list {
			background: #FFF;
		}
		&_item {
			position: relative;
			display: flex;
			padding: 0 .16rem 0.16rem .16rem;
			&_img {
				width: .46rem;
				height: .46rem;
				margin-right: .16rem;
			}
			&_detail {
				flex: 1;
			}
			&_title {
				margin: 0;
				line-height: .2rem;
				font-size: .14rem;
				color: #333;
			}
			&_price {
				display: flex;
				margin: .06rem 0 0 0;
				line-height: .2rem;
				font-size: .14rem;
				color:#E93B3B;
			}
			&_total {
				flex: 1;
				text-align: right;
				color: #000;
			}
			&_yen {
				font-size: .12rem;
			}
		}
	}
	
	.order {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		height: .49rem;
		line-height: .49rem;
		background: #FFF;
		&_price {
			flex: 1;
			text-indent: .24rem;
			font-size: .14rem;
			color: #333;
		}	
		&_btn {
			width: .98rem;
			background: #4FB0F9;
			color: #fff;
			text-align: center;
			font-size: .14rem;
		}
	}
	.mask {
		z-index: 1;
		position:absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background: rgba(0,0,0,0.50);
		&_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 3rem;
			height: 1.56rem;
			background: #FFF;
			text-align: center;
			border-radius: .04rem;
			&_title {
				margin: .24rem 0 0 0;
				line-height: .26rem;
				font-size: .18rem;
				color: #333;
			}
			&_desc {
				margin: .08rem 0 0 0;
				font-size: .14rem;
				color: #666666;
			}
			&_btns {
				display: flex;
				margin: .24rem .58rem;
			}
			&_btn {
				flex: 1;
				width: .8rem;
				line-height: .32rem;
				border-radius: .16rem;
				font-size: .14rem;
				&--first {
					margin-right: .12rem;
					border: .01rem solid #4FB0F9;
					color: #4FB0F9;
				}
				&--last {
					margin-left: .12rem;
					background: #4FB0F9;
					color: #fff;
				}
			}
		}
	}
</style>
